<template>
  <div class="search">
    <el-form :inline="true" :model="formTask" class="demo-form-inline form">
      <el-form-item label="工单编号">
        <el-input v-model.trim="formTask.taskCode" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="工单状态">
        <el-select v-model="formTask.status" placeholder="请选择">
          <el-option
            v-for="item in taskStatus"
            :key="item.statusId"
            :label="item.statusName
            "
            :value="item.statusName
            "
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">
          查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getTaskStatus } from '@/api/task'
export default {
  name: 'TaskSearch',
  data() {
    return {
      formTask: {
        taskCode: '',
        status: ''

      },
      taskStatus: []
    }
  },
  created() {
    this.getTaskStatus()
  },
  methods: {
    onSubmit() {
      this.$emit('filterTask', this.formTask)
    },
    async getTaskStatus() {
      const { data } = await getTaskStatus()
      // console.log(data)
      this.taskStatus = data
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
    height: 64px;
    // width: 100%;
    background-color: #fff;
     display: flex;
     align-items: center;
     padding-top: 20px;
 margin-bottom: 20px;
        .el-button--primary {
            background-color: #6783f7;
            border-color: #6783f7;
             display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;

        }
    .form {
        padding: 0 0 0 17px;
        .el-form-item {
    .el-form-item__label {
        font-size: 14px;
    }
  ::v-deep  label {
        font-weight: 400 !important;
    }
}
    }

     }

</style>
